<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header" @click="backChange">
        <el-icon size="20"><ArrowLeft /></el-icon>
        <span> 编辑专家团队</span>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      :rules="rules"
      :model="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="姓名" prop="name" class="mb20">
        <el-input v-model="ruleForm.name" style="" />
      </el-form-item>
      <el-form-item label="头像" prop="picUrl" class="mb20">
        <ImageUpload
          :limit="1"
          :modelValue="modelValueList"
          @update:modelValue="modelValue"
        ></ImageUpload>
      </el-form-item>
      <el-form-item label="擅长" prop="specialty" class="mb20">
        <div class="flex gap-2">
          <el-tag
            style="margin-right: 10px"
            v-for="tag in ruleForm.specialty"
            :key="tag"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
            type="success"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="InputRef"
            v-model="inputValue"
            class="w-20"
            size="small"
            @keyup.enter="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
          >
            + 标签
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="头衔" prop="title" class="mb20">
        <el-input v-model="ruleForm.title" />
      </el-form-item>
      <el-form-item label="简介" prop="intro" class="mb20">
        <el-input
          v-model="ruleForm.intro"
          type="textarea"
          maxlength="1000"
          show-word-limit
          :rows="6"
        />
      </el-form-item>
      <div style="display: flex" class="mb20">
        <el-form-item label="从业年限">
          <el-input-number v-model="ruleForm.expierences" :min="1" />
        </el-form-item>
        <el-form-item label="星级" prop="stars" class="mb20">
          <el-rate v-model="ruleForm.stars" />
        </el-form-item>
      </div>
      <el-form-item label="详情" prop="introduction" class="mb20">
        <!-- <Editor :height="300" v-model="ruleForm.introduction"></Editor> -->
        <UEditorPlus
          :id="id1"
          v-model="ruleForm.introduction"
          :modelValue="ruleForm.introduction"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="btnLoading"
          type="primary"
          @click="submitForm(ruleFormRef)"
          class="height40"
          style="width: 170px"
        >
          {{ btnLoading ? '保存中...' : '保存' }}
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElInput } from 'element-plus';
import {
  addExpertsTeamSave,
  detailsExpertsTeamDetail,
} from '@/api/specialty/specialty';
const id1 = 'expertTeam';
const router = useRouter();
const route = useRoute();
const inputValue = ref('');
const btnLoading = ref(false);
const { proxy } = getCurrentInstance();
const inputVisible = ref(false);
const InputRef = ref(null);
const ruleFormRef = ref(null);
const id = ref(null);
const modelValueList = ref([]);
let ruleForm = ref({
  name: '',
  intro: '',
  title: '',
  picUrl: '',
  expierences: null,
  stars: 0,
  introduction: '',
  specialty: [],
});

const validatePass = (rule, value, callback) => {
  if (value === '' || value == undefined || value == 0) {
    callback(new Error('请选择评分'));
  }
  callback();
};
const rules = reactive({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  picUrl: [{ required: true, message: '请上传头像', trigger: 'blur' }],
  specialty: [{ required: true, message: '请选择擅长', trigger: 'blur' }],
  intro: [{ required: true, message: '请输入简介', trigger: 'blur' }],
  // 评分组件只能用自定义校验规则
  stars: [{ required: true, validator: validatePass, trigger: 'blur' }],
  introduction: [{ required: true, message: '请输入详情', trigger: 'blur' }],
});

const modelValue = (val) => {
  ruleForm.value.picUrl = val; // 保存单张图片
};
function backChange() {
  router.push('/operation/specialty');
  // router.back()
}
// 创建接口
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      // id存在是修改 不存在是新增
      if (id.value) {
        ruleForm.value.id = id.value;
        handleAddExpertsTeamSave();
      } else {
        handleAddExpertsTeamSave();
      }
    }
  });
};
const handleAddExpertsTeamSave = () => {
  btnLoading.value = true;
  addExpertsTeamSave(ruleForm.value)
    .then((res) => {
      if (res.code == 20000) {
        btnLoading.value = false;
        router.push('/operation/specialty');
        proxy.$modal.msgSuccess(res.msg);
      } else {
        btnLoading.value = false;
      }
    })
    .catch(() => {
      btnLoading.value = false;
    });
};
const handleClose = (tag) => {
  ruleForm.value.specialty.splice(ruleForm.value.specialty.indexOf(tag), 1);
};
const showInput = () => {
  inputVisible.value = true;
  // InputRef.value.input.focus();

  nextTick(() => {
    InputRef.value.focus();
  });
};

const handleInputConfirm = () => {
  if (inputValue.value) {
    ruleForm.value.specialty.push(inputValue.value);
  }
  inputVisible.value = false;
  inputValue.value = '';
};
id.value = route.query.id;
const handleDetailsExpertsTeamDetail = () => {
  detailsExpertsTeamDetail({ id: id.value }).then((res) => {
    if (res.code == 20000) {
      res.data.specialty = JSON.parse(res.data.specialty);
      if (res.data.picUrl) {
        modelValueList.value = res.data.picUrl.split(',');
      } else {
        modelValueList.value = '';
      }

      ruleForm.value = res.data;
    }
  });
};
if (id.value) {
  handleDetailsExpertsTeamDetail();
}
</script>
<style lang="scss" scoped>
::v-deep(.el-textarea) {
  max-width: 787px;
}
::v-deep(.el-form-item .el-input) {
  max-width: 280px;
}

::v-deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 16px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}
</style>
